<template>
  <div>
    <a-modal v-model:visible="visible" title="药品信息" @ok="onSubmit">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="药品编码" v-bind="validateInfos.code">
          <a-input v-model:value="modelRef.code" />
        </a-form-item>
        <a-form-item label="药品名称" v-bind="validateInfos.drugname">
          <a-input v-model:value="modelRef.drugname" />
        </a-form-item>
        <a-form-item label="数量" v-bind="validateInfos.num">
          <a-input v-model:value="modelRef.num" />
        </a-form-item>
        <a-form-item label="单位" v-bind="validateInfos.boxx">
          <a-select v-model:value="modelRef.boxx" placeholder="请选择药品单位">
            <a-select-option value="盒">盒</a-select-option>
            <a-select-option value="袋">袋</a-select-option>
            <a-select-option value="粒">粒</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="单价" v-bind="validateInfos.price">
          <a-input v-model:value="modelRef.price" />
        </a-form-item>
        <!-- <a-form-item label="总价" required>
                <a-input v-model:value="modelRef.price" />
            </a-form-item> -->
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, toRaw, computed, reactive } from 'vue';
import Bus from "@/mitt/index"
import { addDrug } from "@/api/VipApi"
import { cheng } from "@/api/VipApi"
import { Form } from 'ant-design-vue';
const useForm = Form.useForm;
export default defineComponent({
  setup() {
    const modelRef = reactive({
      code: '',
      drugname: "",
      num: "",
      boxx: "",
      price: ""
    });
    const rulesRef = reactive({
      code: [{ required: true, message: '请输入药品编码', },],
      drugname: [{ required: true, message: '请输入药品名称', },],
      num: [{ required: true, message: '请输入药品数量' },],
      boxx: [{ required: true, message: '请输入药品单位' },],
      price: [{ required: true, message: '请输入药品单价' }],
    });
    //resetFields重置表单
    const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef);


    const onSubmit = () => {
      validate()
        .then(() => {

          cheng(toRaw(modelRef)).then((res: any) => {
            // console.log(res.data)
            if (res.code == 200) {
              Bus.emit("addDrugfun",res.data)
            }
            visible.value = false;
          })


        })
        .catch((err: any) => {
          console.log('error', err);
        });
    };

    const showModal = () => {
      visible.value = true;
      resetFields()
    };
    const visible = ref<boolean>(false);

    onMounted(() => {
      Bus.on("showModal", showModal)
    })
    const handleOk = (e: MouseEvent) => {
      console.log(e);
      visible.value = false;
    };
    return {
      visible,
      showModal,
      handleOk,
      labelCol: { span: 5 },
      wrapperCol: { span: 15 },
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
    };
  },
});
</script>
  
  